import React, { useState } from 'react';
import Link from 'next/link';
import { ArrowLeftIcon } from '@heroicons/react/24/outline';
import PhoneKeypad from '@/components/phone/PhoneKeypad';
import RecentContacts from '@/components/phone/RecentContacts';

const PhonePage: React.FC = () => {
  const [phoneNumber, setPhoneNumber] = useState('');

  const handleKeyPress = (key: string) => {
    setPhoneNumber(prev => prev + key);
  };

  const handleDelete = () => {
    setPhoneNumber(prev => prev.slice(0, -1));
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* Header */}
      <div className="flex items-center px-4 py-3 bg-white border-b border-gray-100">
        <Link href="/service/translator" className="mr-3">
          <ArrowLeftIcon className="w-6 h-6 text-gray-600" />
        </Link>
        <span className="text-lg font-medium text-gray-800">电话</span>
      </div>

      <div className="flex-1 flex flex-col">
        {/* Recent Contacts */}
        <div className="flex-none">
          <RecentContacts />
        </div>

        {/* Phone Input and Keypad Container */}
        <div className="flex-1 flex flex-col justify-end">
          {/* Phone Input */}
          <div className="px-6 mb-2">
            <div className="flex items-center bg-gray-50/80 backdrop-blur-sm rounded-2xl border border-gray-200/80 focus-within:border-blue-500 transition-all shadow-sm hover:shadow-md">
              <input
                type="tel"
                value={phoneNumber}
                readOnly
                className="w-full px-6 py-3.5 text-xl text-gray-800 bg-transparent focus:outline-none text-center placeholder-gray-400"
                placeholder="输入电话号码"
              />
            </div>
          </div>

          {/* Keypad */}
          <div className="flex-none bg-white border-t border-gray-100">
            <PhoneKeypad 
              onKeyPress={handleKeyPress}
              onDelete={handleDelete}
            />
          </div>
        </div>
      </div>

      {/* Bottom Navigation */}
      <div className="border-t border-gray-100 bg-white">
        <div className="flex items-center h-14">
          <Link
            href="/service/phone"
            className="flex-1 h-full flex items-center justify-center text-green-600"
          >
            <span className="text-base font-medium">电话</span>
          </Link>
          <div className="w-px h-8 bg-gray-200" />
          <Link
            href="/service/phone/history"
            className="flex-1 h-full flex items-center justify-center text-gray-600"
          >
            <span className="text-base font-medium">通讯录</span>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default PhonePage;